import React, {Component} from "react";
import {
	View,
	Text,
	TouchableOpacity,
	StyleSheet,
  Image,
} from "react-native";
import Video from "react-native-video";

export default class VideoExam extends Component {
	constructor(props) {
		super(props);
		this.state = {
			rate: 1, //速度；
			volume: 1, //音量；
			muted: false, //静音
			resizeMode: 'cover', //播放窗口的模式；
			duration: 0.0, //
			currentTime: 0.0, //
			paused: true, //暂停；
      // isPaused: true,
		}
		video: Video;
	}

	onLoad = (data) => {
    this.setState({ duration: data.duration });
  };

  onProgress = (data) => {
    this.setState({ currentTime: data.currentTime, isPaused: false, });

  };

  onEnd = () => {
    this.setState({ paused: true })
    this.video.seek(0)
  };

  onAudioBecomingNoisy = () => {
    this.setState({ paused: true })
  };

  onAudioFocusChanged = (event: { hasAudioFocus: boolean }) => {
    this.setState({ paused: !event.hasAudioFocus })
  };

  getCurrentTimePercentage() {
    if (this.state.currentTime > 0) {
      return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
    }
    return 0;
  };

  render() {
    const flexCompleted = this.getCurrentTimePercentage() * 100;
    const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;

    return (
      <View style={[styles.container, {width: gScreen.width, height: gScreen.height / 3,}]}>
        <TouchableOpacity
          style={styles.fullScreen}
          onPress={() => this.setState({ paused: !this.state.paused })}
        >
          <Video
            ref={(ref: Video) => { this.video = ref }}
            source={require('./../video/yyj.mp4')}
            style={styles.fullScreen}
            rate={this.state.rate}
            paused={this.state.paused}
            volume={this.state.volume}
            muted={this.state.muted}
            resizeMode={this.state.resizeMode}
            onLoad={this.onLoad}
            onProgress={this.onProgress}
            onEnd={this.onEnd}
            onAudioBecomingNoisy={this.onAudioBecomingNoisy}
            onAudioFocusChanged={this.onAudioFocusChanged}
            repeat={false}
          />

          { this.state.paused ? 
              <Image 
                source={require("./../images/paused.png")} 
                style={styles.imgLoad}
              /> 
              :
              null
          }
          
        </TouchableOpacity>

        <View style={styles.controls}>
          <View style={styles.trackingControls}>
            <View style={styles.progress}>
              <View style={[styles.innerProgressCompleted, { flex: flexCompleted }]} />
              <View style={[styles.innerProgressRemaining, { flex: flexRemaining }]} />
            </View>
          </View>
        </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
    marginTop: 15,
  },
  fullScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  controls: {
    backgroundColor: 'transparent',
    borderRadius: 5,
    position: 'absolute',
    bottom: 13,
    left: 20,
    right: 20,
  },
  progress: {
    flex: 1,
    flexDirection: 'row',
    borderRadius: 3,
    overflow: 'hidden',
  },
  innerProgressCompleted: {
    height: 2,
    backgroundColor: '#cccccc',

  },
  innerProgressRemaining: {
    height: 2,
    backgroundColor: '#2C2C2C',
  },
  controlOption: {
    alignSelf: 'center',
    fontSize: 13,
    color: 'white',
    paddingLeft: 2,
    paddingRight: 2,
    lineHeight: 12,
  },
  imgLoad: {
    position: "absolute",
    left: gScreen.width/2 - 17.5,
    top: gScreen.height/6 - 17.5,
    width: 35,
    height: 35,
  },
});